<template>
  <div class="header">
    <div class="header_item header_logo">
      <router-link to="/" class="header_logo_link">
        <el-image
          src="https://v3.cn.vuejs.org/logo.png"
          style="width: 48px; height: 48px; margin: 0 auto"
          fit="contain"
        >
          <template #error>
            <div class="image-slot">
              <el-icon><icon-picture /></el-icon>
            </div>
          </template>
        </el-image>
        <div class="header_logo_title">{{ siteName }}</div>
      </router-link>
    </div>
    <div class="header_item">
      <el-page-header
        :icon="ArrowLeft"
        :content="title"
        :title="backText"
        @back="goBack"
      />
    </div>
    <div class="header_item aside">
      <div class="aside_item" @click="openSearch">
        <div class="aside_item_search">
          <el-icon><Search /></el-icon>
          <span class="aside_item_search_text" style="cursor: text">{{
            searchDefText
          }}</span>
        </div>
      </div>
      <div class="aside_item" @click="showMessages" style="cursor: pointer">
        <el-icon><Notification /></el-icon>
        {{ msgTitle }}({{ messagesCount }})
      </div>
      <div class="aside_item" style="cursor: pointer">
        <el-dropdown trigger="click" @command="handleCommand">
          <el-button>
            {{ NickName }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="editUserInfo">{{
                userInfoTitle
              }}</el-dropdown-item>
              <el-dropdown-item command="editPassword">{{
                editPassTitle
              }}</el-dropdown-item>
              <el-dropdown-item divided>Action 3</el-dropdown-item>
              <el-dropdown-item>Action 4</el-dropdown-item>
              <el-dropdown-item command="quitLogin" divided>{{
                quitLoginTitle
              }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
  <el-drawer
    v-model="drawer"
    :title="searchDefText"
    direction="rtl"
    :before-close="handleClose"
    size="30%"
  >
    <span>Hi, there!</span>
  </el-drawer>
  <el-drawer
    v-model="drawer2"
    :title="msgTitle + '(' + messagesCount + ')'"
    direction="rtl"
    :before-close="handleClose"
    size="30%"
  >
    <span>Hi, there!</span>
  </el-drawer>
</template>

<script lang="ts" setup>
import {
  ArrowLeft,
  Picture as IconPicture,
  Search,
  Notification,
  ArrowDown,
  User,
} from "@element-plus/icons-vue";
const { t } = useI18n();
const router = useRouter();
const storeActions = useActions("", ["quitLogin"]);
const storeState = useState("", ["siteName"]);
const goBack = () => {
  router.go(-1);
};
const backText = t("backText");
const msgTitle = t("msgTitle");
const siteName = storeState.siteName;
const NickName = ref("NickName");
const searchDefText = ref(t("search"));
const userInfoTitle = t("userInfoTitle");
const editPassTitle = t("editPassTitle");
const quitLoginTitle = t("quitLogin.title");
const handleCommand = (command: string) => {
  console.log(command);
  switch (command) {
    case "quitLogin":
      ElMessageBox.confirm(t("quitLogin.tips"))
        .then(() => {
          storeActions
            .quitLogin()
            .then(() => {
              router.push({
                name: "Login",
              });
            })
            .catch((err: any) => console.error(err));
        })
        .catch(() => {
          // catch error
        });
      break;
  }
};
const showMessages = () => {
  openMessages();
};
const messagesCount = 0;
const drawer = ref(false);
const drawer2 = ref(false);
const openSearch = () => {
  drawer.value = true;
};
const openMessages = () => {
  drawer2.value = true;
};
const handleClose = (done: () => void) => {
  done();
};
</script>
<script lang="ts">
import {
  ElPageHeader,
  ElImage,
  ElIcon,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElButton,
  ElDrawer,
  ElMessageBox,
} from "element-plus";
import { useActions } from "@/store/useActions";
import { useState } from "@/store/useState";
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
export default defineComponent({
  props: {
    title: {
      type: String,
      default() {
        return "Title";
      },
    },
  },
  components: {
    ElPageHeader,
    ElImage,
    ElIcon,
    ElDropdown,
    ElDropdownMenu,
    ElDropdownItem,
    ElButton,
    ElDrawer,
  },
});
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  /*   height: 70px;
  border-bottom: 1px solid #ecf5ff;
 */
  background-color: var(--bg-color);
  .header_item {
    width: 75%;
    &.header_logo {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 200px;
      padding-right: 10px;
      height: 64px;
      a {
        display: flex;
        justify-content: center;
        align-items: center;
        &.header_logo_link {
          text-decoration: none;
          color: var(--bg-font-color);
          .header_logo_title {
            font-size: 18px;
            font-weight: 700;
            text-align: center;
            margin-left: 10px;
          }
        }
      }
    }
    &.aside {
      display: flex;
      width: 400px;
      justify-content: center;
      .aside_item {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 10px 0 0;
        font-size: 14px;
        .aside_item_search {
          border-radius: 4px;
          background-color: var(--bg-search-color);
          display: flex;
          align-items: center;
          width: 100px;
          height: 32px;
          padding: 0 10px;
          .aside_item_search_text {
            margin-left: 10px;
            display: block;
          }
        }
      }
    }
  }
}
</style>
